<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>09滑动轮播图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .wrap {
            width: 600px;
            height: 400px;
            background: pink;
            margin: 100px auto;
            overflow: hidden;
            position: relative;
            cursor: pointer;
        }

        .pic_list{
            width: 2400px;
            height: 400px;
            position: absolute;
            left: 0;
            top: 0;
        }
        .pic_list li {
            width: 600px;
            height: 400px;
            float: left;
            color: white;
            font-size: 100px;
            text-align: center;
            line-height: 400px;
        }

        .pic_list li.pic1 {
            background: url("image/pic/pic1.jpg") no-repeat center/100% 100%;
        }

        .pic_list li.pic2 {
            background: url("image/pic/pic2.jpg") no-repeat center/100% 100%;
        }

        .pic_list li.pic3 {
            background: url("image/pic/pic3.jpg") no-repeat center/100% 100%;
        }

        .pic_list li.pic4 {
            background: url("image/pic/pic4.jpg") no-repeat center/100% 100%;
        }

        /* 左右按钮 */
        .btn {
            width: 30px;
            height: 60px;
            background: red;
            position: absolute;
            color: white;
            font-size: 30px;
            text-align: center;
            line-height: 60px;
        }

        .btn_l {
            left: 0;
            top: 50%;
            margin-top: -30px;
        }

        .btn_r {
            right: 0;
            top: 50%;
            margin-top: -30px;
        }

        /* 下面四个点 */
        .points_list {
            width: 200px;
            height: 40px;
            position: absolute;
            left: 50%;
            margin-left: -100px;
            bottom: 30px;
            background: skyblue;
            border-radius: 20px;
        }

        .points_list li {
            float: left;
            width: 30px;
            height: 30px;
            background: green;
            border-radius: 50%;
            margin: 5px 10px;
        }

        .points_list li:hover {
            background: red;
        }

        .points_list li.red {
            background: red;
        }
    </style>
    <script src="../jquery-1.11.3/jquery.min.js"></script>
</head>

<body>
    <div class="wrap">
        <ul class="pic_list">
            <li class="pic1">1</li>
            <li class="pic2">2</li>
            <li class="pic3">3</li>
            <li class="pic4">4</li>
        </ul>
        <ul class="points_list">
            <li class="red"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div class="btn btn_l">&lt;</div>
        <div class="btn btn_r">&gt;</div>
    </div>
</body>
<script>
    $(function () {
        var index = 0;

        // 四个按钮切换
        $(".points_list li").click(function () {
            // 获取当前点击的索引
            nowIndex = $(this).index();
            if(nowIndex>index){
                toLeft();
            }else{
                toRight();
            }
            index=nowIndex;
            $(".points_list li").eq(index).addClass("red").siblings().removeClass();

        })

        // 右按钮
        $(".btn_r").click(function () {
            index == 3 ? index = 0 : index++;
            toLeft()
        })
        // 左按钮
        $(".btn_l").click(function () {
            index == 0 ? index = 3 : index--;
            toRight()
        })
        // 向右滑动
        function toRight(){
            $(".pic_list li").last().prependTo($(".pic_list"));
            $(".pic_list").css("left","-600px");
            $(".pic_list").animate({"left":"0"});
            $(".points_list li").eq(index).addClass("red").siblings().removeClass();
        }

        // 向左滑动
        function toLeft(){
            $(".pic_list").animate({"left":"-600px"},function(){
                $(".pic_list li").first().appendTo($(".pic_list"));
                $(".pic_list").css("left",0)
            })
            $(".points_list li").eq(index).addClass("red").siblings().removeClass();
        }



        function qiehuan(index) {
            $(".points_list li").eq(index).addClass("red").siblings().removeClass();
            $(".pic_list li").eq(index).fadeIn().siblings().fadeOut(0);
        }

        // 自动切换
        // var timer = setInterval(function () {
        //     index == 3 ? index = 0 : index++;
        //     qiehuan(index);
        // }, 2000)

        // $(".wrap").hover(function () {
        //     clearInterval(timer);
        // }, function () {
        //     timer = setInterval(function () {
        //         index == 3 ? index = 0 : index++;
        //         qiehuan(index);
        //     }, 2000)
        // })
    })
</script>

</html>